<template>
  <div>
    <div class="padding-lr30">
      <div>
        <div class="rem-30px flex align-center padding-tb30 border-bottom">
          <div class="c-99 w-90 text-justify word-all">手机号</div>
          <div class="flex-grow padding-l60">
            <input type="text" name="phong" maxlength="11" v-model="phone" placeholder="请输入手机号" />
          </div>
        </div>
        <div class="rem-30px flex align-center padding-tb30 border-bottom">
          <div class="c-99 w-90 text-justify word-all">验证码</div>
          <div class="flex-grow padding-l60">
            <input type="number" name="code" maxlength="6" v-model="code" placeholder="请输入验证码" />
          </div>
          <div
            :class="[timeType?'bg-f5':'bg-ff0',timeType?'c-99':'text-ff','rem-24px','radius-10']"
            style="padding: 0.18rem 0.1rem;word-break: keep-all;margin-left: -0.4rem"
            @click="showCode"
          >获取验证码{{timeType?time:''}}</div>
        </div>
        <div class="rem-30px flex align-center padding-tb30 border-bottom">
          <div class="c-99 w-90 text-justify">新密码</div>
          <div class="flex-grow padding-l60">
            <input
              type="password"
              name="password"
              maxlength="18"
              v-model="password"
              placeholder="请输入6-18位新密码"
            />
          </div>
        </div>
        <div class="rem-30px flex align-center padding-tb30 border-bottom">
          <div class="c-99 w-120">确认密码</div>
          <div class="flex-grow padding-l30">
            <input
              type="password"
              name="repeat_password"
              @change="inspect"
              v-model="repeat_password"
              maxlength="18"
              placeholder="请确认密码"
            />
          </div>
        </div>
      </div>
      <!--  -->
      <div class="padding-lr28 margin-t40">
        <div class="sure text-center bg-ff0 text-ff" @click="sign">注册</div>
      </div>
    </div>

    <!-- 浮层 -->
    <van-popup v-model="show">
      <div class="popup text-center rem-32px text-33 line-100">
        <div class="border-bottom">获取验证码</div>
        <div class="flex padding-lr40 border-bottom justify-between">
          <div class="w-20p w-120 margin-r24 c-99 word-all">手机号</div>
          <input class="flex-grow" name="phone" maxlength="11" type="text" disabled v-model="phone" />
        </div>
        <div class="flex padding-lr40 border-bottom justify-between">
          <div class="c-99 margin-r24">验证码</div>
          <input
            class="w-100 flex-grow"
            name="vcode"
            type="text"
            maxlength="4"
            v-model="vscode"
            placeholder="请输入验证码"
          />
          <vcode @codeChange="setCode" v-if="show"></vcode>
        </div>
        <div class="flex padding-lr40 margin-t40 justify-between text-ff rem-34px text-center">
          <div class="sure bg-bcb w-47p" @click="show=false">取消</div>
          <div class="sure bg-ff0 w-47p" @click="sub">确认</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>


<script>
import vcode from "../components/vcode";
export default {
  components: {
    vcode
  },
  data() {
    return {
      phone: "",
      password: "",
      code: "",
      repeat_password: "",
      show: false, // 浮层显示
      time: 60, // 发送验证倒计时
      timeType: false,
      vcode: "", // 四位验证码
      vscode: "" // 输入的四位验证码
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#ffffff";
  },
  methods: {
    showCode() {
      if (!this.phone || !/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$toast("手机号码格式有误");
        return false;
      }
      if (this.timeType) {
        return false;
      }
      this.show = true;
    },
    sign() {
      if (this.password != this.repeat_password) {
        this.$toast("密码两次输入不正确");
        return false;
      }
      if (
        !this.phone ||
        !this.password ||
        !this.code ||
        !this.repeat_password
      ) {
        this.$toast("信息不能为空");
        return false;
      }

      // 判断短信验证码
      // type=1 企业重置密码 || type=0 个人重置密码

      this.$axios
        .post("/common/send/verifyCode", {
          phone: this.phone,
          code: this.code
        })
        .then(res => {
          if (res.data.code == 0) {
            let url = this.$route.query.type
              ? "/home/initPassword"
              : "/wap/register/initPassword";
            this.$axios
              .post(url, {
                phone: this.phone,
                code: this.code,
                password: this.password,
                password_confirmation: this.repeat_password
              })
              .then(res => {
                if (res.data.code == 0) {
                  this.$router.go(-1);
                }
              });
          }
        });
    },
    // 确定密码
    inspect() {
      if (this.password != this.repeat_password) {
        this.$toast("密码两次输入不正确");
        return false;
      }
    },
    // 手机发送验证码
    getCode() {
      if (this.timeType) {
        return false;
      } else {
        this.timeType = true;
        this.$axios
          .post("/common/send/smsCode", {
            phone: this.phone
          })
          .then(res => {
            this.$toast(res.data.msg);
          });
        var getTime = setInterval(() => {
          this.time--;
          if (this.time < 0) {
            clearInterval(getTime);
            this.timeType = false;
            this.time = 60;
          }
        }, 1000);
      }
    },
    // 验证码
    setCode(e) {
      this.vcode = e;
    },
    sub() {
      if (this.vscode.toLowerCase() != this.vcode.toLowerCase()) {
        this.$toast("验证码有误");
        return false;
      } else {
        this.show = false;
        this.vscode = "";
        this.getCode();
      }
    }
  }
};
</script>

<style scoped>
.title::after {
  content: "";
  display: block;
  width: 0.94rem;
  height: 0.1rem;
  border-radius: 0.04rem;
  background: #ff0000;
}
.cover_img img {
  width: 1.69rem;
  height: 1.69rem;
}
.popup {
  width: 6.62rem;
  height: 5rem;
}
.popup input {
  height: 1rem;
  line-height: 1rem;
}
</style>